import React, { Component } from 'react'
import axios from 'axios'
// 生命周期  三大类
// 实例期
// constructor  (使用少)
// componentWillMount  (将要废弃)
// render  (类组件中必须要有的--渲染视图)
// componentDidMount   (使用较多--请求数据，操作dom)

// 存在期

// 销毁期

export default class Life extends Component {
    constructor() {
        super()
        console.log('我是实例期的第一个生命周期--constructor')
    }
    state = {
        carInfo: {}
    }
    // 组件 将要 挂载
    // componentWillMount() {
    //     console.log('我是实例期的第二个生命周期--componentWillMount')
    // }
    render() {
        // 想要让类组件的视图更新，必须要用this.setState
        console.log('我是实例期的第三个生命周期--render')
        const { carInfo } = this.state
        console.log(carInfo)
        return (
            <div>
                {
                    Object.keys(carInfo).map((item, index) => {
                        return <div key={index}>
                            <h2>
                                { item }
                            </h2>
                            <ul>
                                {
                                    carInfo[item].map(carItem => {
                                        return <li key={carItem.MasterID}>
                                            { carItem.Name }
                                        </li>
                                    })
                                }
                            </ul>
                        </div>
                    })
                }
            </div>
        )
    }
    // 组件 已经完成  挂载 
    componentDidMount() {
        console.log('我是实例期的第四个生命周期--componentDidMount')
        axios.get("http://baojia.chelun.com/v2-car-getMasterBrandList.html").then(res => {
            let carInfo = {}
            res.data.data.forEach(item => {
                // 先截取首字母
                const Spell = item.Spelling.slice(0, 1)
                //  A=[奥迪, 阿斯顿马丁, 埃尔法, 爱驰]    A    A    A
                //  B=[本田, 奔驰, 宝马]    B    B    B    B    B
                // 给对象添加key   和  value
                // 判断当前key的值是否是一个数组
                if (typeof carInfo[Spell] !== 'object') {
                    carInfo[Spell] = [item]
                } else {
                    carInfo[Spell].push(item)
                }
            })
            this.setState({
                carInfo
            })
        })
    }
}
